<h1>
  <clr-icon shape="world" size="48" class="resIcon"></clr-icon>
  探索新世界
</h1>

<clr-tabs>
  <clr-tab>
    <button clrTabLink>探索</button>
    <clr-tab-content *clrIfActive>
      <div class="clr-row">
        <div
          class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-6 clr-col-xl-6"
        >
          <p>
            在这里，您可以探索新的世界。
            <span>
              最高等级:
              {{ ms.game.enemyManager.maxLevel }} </span
            ><br />
            如果您有声望，您最多可以选择三个地区选项。
          </p>

          <clr-alert
            *ngIf="
              ms.game.resourceManager.searchX1.quantity.lte(0);
              else progress
            "
            [clrAlertType]="'warning'"
            [clrAlertClosable]="false"
          >
            <clr-alert-item>
              <span class="alert-text">
                你没有
                <a [routerLink]="'/home/res/X1'"
                  >{{ ms.game.resourceManager.searchX1.name }}
                </a>
              </span>
            </clr-alert-item>
          </clr-alert>

          <ng-template #progress>
            进度:
            <app-polynom
              [c]="ms.game.resourceManager.searchProgress.c"
            ></app-polynom>
            <br />
          </ng-template>

          <form clrForm>
            <clr-input-container>
              <label>等级 </label>
              <input
                clrInput
                type="number"
                [(ngModel)]="ms.game.userSearchLevel"
                name="level"
                required
                [max]="ms.game.enemyManager.maxLevel"
                min="1"
              />
              <clr-control-error
                >必须是数字 (1 -
                {{ ms.game.enemyManager.maxLevel }})</clr-control-error
              ></clr-input-container
            >
            <input
              type="range"
              [name]="'sln'"
              min="1"
              [max]="ms.game.enemyManager.maxLevel"
              step="1"
              [(ngModel)]="ms.game.userSearchLevel"
            />
          </form>

          <!-- Search options -->
          <div class="btn-group" *ngIf="moreSearch">
            <div class="checkbox btn" *ngIf="metal">
              <input
                type="checkbox"
                id="btn-mmd"
                [(ngModel)]="ms.game.enemyManager.moreMetal"
                [disabled]="
                  !ms.game.enemyManager.moreMetal && this.bonusCount >= 3
                "
              />
              <label for="btn-mmd">
                <clr-icon
                  [attr.shape]="ms.game.resourceManager.miningDistrict.shape"
                ></clr-icon>
              </label>
            </div>
            <div class="checkbox btn" *ngIf="cry">
              <input
                type="checkbox"
                id="btn-mcd"
                [(ngModel)]="ms.game.enemyManager.moreCrystal"
                [disabled]="
                  !ms.game.enemyManager.moreCrystal && this.bonusCount >= 3
                "
              />
              <label for="btn-mcd">
                <clr-icon
                  [attr.shape]="ms.game.resourceManager.crystalDistrict.shape"
                ></clr-icon
              ></label>
            </div>
            <div class="checkbox btn" *ngIf="hab">
              <input
                type="checkbox"
                id="btn-mhs"
                [(ngModel)]="ms.game.enemyManager.moreHabitable"
                [disabled]="
                  !ms.game.enemyManager.moreHabitable && this.bonusCount >= 3
                "
              />
              <label for="btn-mhs">
                <clr-icon
                  [attr.shape]="ms.game.resourceManager.habitableSpace.shape"
                ></clr-icon
              ></label>
            </div>
            <div class="checkbox btn" *ngIf="hab2">
              <input
                type="checkbox"
                id="btn-mhs2"
                [(ngModel)]="ms.game.enemyManager.moreHabitable2"
                [disabled]="
                  !ms.game.enemyManager.moreHabitable2 && this.bonusCount >= 3
                "
              />
              <label for="btn-mhs2">
                <clr-icon
                  [attr.shape]="ms.game.resourceManager.habitableSpace.shape"
                ></clr-icon
              ></label>
            </div>
            <div class="checkbox btn" *ngIf="robot">
              <input
                type="checkbox"
                id="btn-mr"
                [(ngModel)]="ms.game.enemyManager.moreRobot"
                [disabled]="
                  !ms.game.enemyManager.moreRobot && this.bonusCount >= 3
                "
              />
              <label for="btn-mr"> <clr-icon shape="robot"></clr-icon></label>
            </div>
            <div class="checkbox btn" *ngIf="rand">
              <input
                type="checkbox"
                id="btn-rand"
                [(ngModel)]="ms.game.enemyManager.randomized"
              />
              <label for="btn-rand">
                <clr-icon shape="random"></clr-icon
              ></label>
            </div>
          </div>

          <clr-alert
            *ngIf="!limited"
            [clrAlertType]="'warning'"
            [clrAlertClosable]="false"
            class="smallMarginBot"
          >
            <clr-alert-item>
              <span class="alert-text">
                达到上限，你最多同时有10个敌人。
              </span>
            </clr-alert-item>
          </clr-alert>

          <clr-alert
            *ngIf="valid"
            [clrAlertType]="'info'"
            [clrAlertClosable]="false"
            class="smallMarginBot"
          >
            <clr-alert-item>
              <span class="alert-text">
                探索成本:
                <app-price-line
                  [canBuy]="true"
                  [unit]="ms.game.resourceManager.searchProgress"
                  [price]="
                    ms.game.enemyManager.getRequiredSearch(
                      ms.game.userSearchLevel
                    )
                  "
                ></app-price-line>
              </span>
            </clr-alert-item>
          </clr-alert>

          <div class="btn-group smallMarginBot">
            <button
              class="btn btn-success"
              (click)="generate()"
              [disabled]="!isValid()"
            >
              探索
            </button>
            <button
              class="btn btn-warning"
              (click)="deleteModal = true"
              [disabled]="ms.game.enemyManager.allEnemy.length === 0"
            >
              批量删除
            </button>
            <button
              class="btn btn-danger"
              (click)="deleteAllModal = true"
              [disabled]="ms.game.enemyManager.allEnemy.length === 0"
            >
              全部删除
            </button>
          </div>
          <br />
          <div class="btn-group smallMarginBot">
            <button
              class="btn btn"
              (click)="sortAsc()"
              [disabled]="ms.game.enemyManager.allEnemy.length === 0"
            >
              正序排列
            </button>
            <button
              class="btn btn"
              (click)="sortDesc()"
              [disabled]="ms.game.enemyManager.allEnemy.length === 0"
            >
              倒序排列
            </button>
          </div>

          <clr-toggle-wrapper>
            <input
              type="checkbox"
              clrToggle
              [(ngModel)]="EnemyManager.NewOnTop"
              name="newTop"
            />
            <label>顶部显示新的</label>
          </clr-toggle-wrapper>
        </div>

        <div
          class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-6 clr-col-xl-6"
        >
          <h4>工作:</h4>
          <div
            cdkDropList
            (cdkDropListDropped)="drop($event)"
            class="myBg drag-list"
          >
            <app-job
              cdkDrag
              *ngFor="
                let job of ms.game.enemyManager.searchJobs;
                trackBy: getJobId
              "
              [job]="job"
            ></app-job>
          </div>
        </div>
      </div>
    </clr-tab-content>
  </clr-tab>
  <clr-tab *ngIf="automatorTab">
    <button clrTabLink>自动化</button>
    <clr-tab-content *clrIfActive>
      <app-search-auto></app-search-auto>
    </clr-tab-content>
  </clr-tab>
</clr-tabs>

<!-- Delete Modal -->
<clr-modal [(clrModalOpen)]="deleteModal" [clrModalSize]="'sm'">
  <h3 class="modal-title">批量删除</h3>
  <div class="modal-body">
    <p>
      删除级别低于此数值的所有敌人
      <app-formatted-quantity
        [quantity]="ms.game.userSearchLevel"
        [integer]="true"
      ></app-formatted-quantity
      >?
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="deleteModal = false">
      取消
    </button>
    <button type="button" class="btn btn-warning" (click)="massDelete()">
      删除
    </button>
  </div>
</clr-modal>

<!-- Delete All Modal -->
<clr-modal [(clrModalOpen)]="deleteAllModal" [clrModalSize]="'sm'">
  <h3 class="modal-title">全部删除</h3>
  <div class="modal-body">
    <p>
      删除所有敌人？
    </p>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-outline"
      (click)="deleteAllModal = false"
    >
      取消
    </button>
    <button type="button" class="btn btn-warning" (click)="deleteAll()">
      删除
    </button>
  </div>
</clr-modal>
